<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/ZUi框架/dist/css/zui.css">
</head>
<body>
    <div id="app">
        <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal" @click="showloginpop" >登录</button>
        <button type="button" class="btn btn-lg btn-success" data-toggle="modal" data-target="#myModal" @click="showaboutpop">关于</button>
        <pop>
            <login v-show="showlogin"></login>
            <about v-show="showabout"></about>
        </pop>
    </div>

    <template id="temp">
        <div class="modal modal-for-page fade in"id="myModal" aria-hidden="false" style="display: none;">
            <div class="modal-dialog" style="top:137px;">
                <div class="modal-content">
                    <slot>默认内容</slot>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template id="tow">
        <div>
            <div class="modal-header">
                <button type="button" data-dismiss="modal" class="close">
                    <span aria-hidden="true">✘</span>
                    <span class="sr-only"></span>
                </button>
                <h4 class="modal-title"> 请用户输入登录信息</h4>
            </div>
            <div class="modal-body" style="max-height:initial;overflow:visible;">
                <label for="first">账户名：</label>
                <input type="text" name="first"><br/><br/>
                <label for="last">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                <input type="password" name="last"></div>
        </div>
    </template>
    <template id="three">
        <div>
            <div class="modal-header">
                <button type="button" data-dismiss="modal" class="close">
                    <span aria-hidden="true">✘</span>
                    <span class="sr-only">关闭</span>
                </button>
                <h4 class="modal-title">网站介绍</h4>
            </div>
            <div class="modal-body" style="max-width: initial;overflow: visible;">
                <h4>虞美人·春花秋月何时了？ <small>五代·李煜</small>
                   
                </h4>
                    <p>春风秋月何时了?往事知多少。小楼昨夜又东风,故国不堪回首月明中。<br/>雕栏玉砌应犹在，只是朱颜改。问君能有几多愁?恰似一江春水向东流。</p>
                
            </div>
        </div>
    </template>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js" type="text/javaScript" charset="utf-8"></script>
    <script src="/ZUi框架/dist/js/zui.js" type="text/javaScript" charset="utf-8"></script>
    <script type="text/javaScript" charset="UTF-8" src="/JS文件/vue.js"></script>
    <script>
        Vue.component("pop",{
            template:"#temp",
        })
        Vue.component("login",{
            template:"#tow"
        })
        Vue.component("about",{
            template:"#three",
        })
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'hellow，world',
                showabout:false,
                showlogin:false
            },
            methods:{
                showloginpop(){
                    this.showlogin=true
                    this.showabout=false
            },
            showaboutpop(){
                this.showlogin=false
                this.showabout=true
            }
            }
        })
    </script>
</body>
</html>